<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Code Folding with ACE Editor</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.13/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.13/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <style>
        #editor {
            width: 800px;
            height: 500px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Code Folding with ACE Editor</h1>
    <div id="editor"></div>

    <script>
        // 初始化 ACE 编辑器
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/github"); // 设置主题
        editor.session.setMode("ace/mode/javascript"); // 设置语言模式
        editor.setOptions({
            enableBasicAutocompletion: true,  // 启用自动补全
            enableSnippets: true,  // 启用代码片段
            enableLiveAutocompletion: true,  // 启用实时补全
            showFoldWidgets: true,  // 显示折叠按钮
            foldStyle: "markbegin"  // 设置折叠样式，'markbegin', 'markbeginend' 或 'manual'
        });
        // 定义自定义折叠规则
        editor.getSession().foldAll(1, 5); // 折叠从第10行到第20行的代码

        // 添加一些示例代码
        editor.setValue(`function example() {
    if (true) {
        console.log("This is a sample function.");
        for (var i = 0; i < 10; i++) {
            console.log(i);
        }
    } else {
        console.log("No operation.");
    }
}
example();`);
    </script>
</body>
</html>
